<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>王者荣耀官网-腾讯游戏</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/index_spr.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script>
      // rem布局
      (function () {
        function setFont() {
          var designWidth = 750; // 移动端设计稿宽度通常为750
          // 设置根元素字体大小 = 视口宽度 / 设计稿宽度 * 100
          document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / designWidth) * 100 + 'px';
        }
        setFont();
        window.addEventListener('resize', setFont);
      })();
    </script>
  </head>
  <body>
    <!-- 顶部广告区域 -->
    <div class="adv">
      <a href="" class="logo spr spr_logo"></a>
      <div class="title">
        <h1>王者荣耀</h1>
        <p>团队成就更多</p>
      </div>
      <a href="" class="download spr spr_download"></a>
    </div>
    <!-- 顶部菜单 -->
    <div class="header">
      <a href="" class="active">
        <span>首页</span>
      </a>
      <a href="">
        <span>攻略中心</span>
      </a>
      <a href="">
        <span>赛事中心</span>
      </a>
      <a href="">
        <span>IP新游</span>
      </a>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="slider-container">
        <img class="slider-item" src="./assets/banner1.jpeg" alt="" />
        <img class="slider-item" src="./assets/banner2.jpeg" alt="" />
        <img class="slider-item" src="./assets/banner3.jpeg" alt="" />
      </div>
      <div class="dots">
        <span class="active"></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- 中部菜单 -->
    <div class="menu">
      <div class="menu-list">
        <a class="item" href="">
          <div class="spr spr_baoliaozhan"></div>
          <div>爆料站</div>
        </a>
        <a class="item" href="">
          <div class="spr spr_gushizhan"></div>
          <div>故事站</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_zhoubianshangcheng"></div>
          <div>周边商城</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_tiyanfu"></div>
          <div>体验服</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_xinrenzhuanqu"></div>
          <div>新人专区</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_rongyaochuancheng"></div>
          <div>荣耀·传承</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_wangzheyingdi"></div>
          <div>王者营地</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_gongzhonghao"></div>
          <div>公众号</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_banbenjieshao"></div>
          <div>版本介绍</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_duijuhuanjing"></div>
          <div>对局环境</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_gongchuangjihua"></div>
          <div>IP共创计划</div>
        </a>
        <a href="" class="item">
          <div class="spr spr_chuangyihudongying"></div>
          <div>创意互动营</div>
        </a>
      </div>
      <div class="expand">
        <span class="spr spr_expand"></span>
        <span class="txt">展开</span>
      </div>
    </div>
    <!-- 新闻区域 -->
    <div class="block-container news-list">
      <div class="block-title">
        <div class="spr spr_news"></div>
        <h2>新闻资讯</h2>
        <a href="" class="spr spr_more"></a>
      </div>
      <div class="block-main">
        <div class="block-menu">
          <span class="active">热门</span>
          <span class="">新闻</span>
          <span class="">公告</span>
          <span>活动</span>
          <span>赛事</span>
        </div>
        <!-- 使用之前的轮播图结构 -->
        <div class="slider-container"></div>
      </div>
    </div>

    <!-- 英雄区域 -->
    <div class="block-container hero-list">
      <div class="block-title">
        <div class="spr spr_hero"></div>
        <h2>英雄列表</h2>
        <a href="" class="spr spr_more"></a>
        <a href="https://pvp.qq.com/web201605/herodetail/m/155.html">
          <img src="./assets/new-hero.jpg" alt="" />
        </a>
      </div>
      <div class="block-main">
        <div class="block-menu">
          <span class="active">热门</span>
          <span>战士</span>
          <span>法师</span>
          <span>坦克</span>
          <span>刺客</span>
          <span>射手</span>
          <span>辅助</span>
        </div>
        <div class="slider-container"></div>
      </div>
    </div>

    <!-- 精彩视频 -->
    <div class="block-container video-list">
      <div class="block-title">
        <div class="spr spr_video"></div>
        <h2>精彩视频</h2>
        <a href="" class="spr spr_more"></a>
      </div>
      <div class="block-main">
        <div class="block-menu">
          <span class="active">精品栏目</span>
          <span>英雄攻略</span>
          <span>赛事精品</span>
        </div>
        <div class="slider-container"></div>
      </div>
    </div>
    <a href="" class="more">加载更多内容!!!</a>
    <script src="./js/index.js"></script>
  </body>
</html>
